<template>
    <div id="myBlogList" style="width:100%;margin-right:40px" >
        <ul  class="infinite-list">
            <li v-for="item in myArticleList"  style="list-style:none;"  class="infinite-list-item">
                <el-row>
                    <div style="float:left">
                        <router-link :to="'/myBlogDetailShow/'+item.id" style="text-decoration: none;color:black" class="myBlogList">
                            <span class="titleFlag" v-if="item.original ==0" style="font-size:5px;color:#74CF88">转载</span>
                            <span class="titleFlag" v-if="item.original ==1" style="font-size:5px;color:red">原创</span>
                            <span style="padding:3px;font-weight:bold;font-size:18px">{{item.title}}</span>
                        </router-link>
                    </div>

                    <div style="float:right">
                        <router-link :to="'/myBlogDetailShow/'+item.id" style="text-decoration: none;color:black">
                            <span style="font-size:12px;color:#349EDF;margin-left:20px">查看</span>
                        </router-link>
                        
                        <span style="font-size:12px;color:#349EDF;margin-left:20px;cursor:pointer" @click="cancleTop(item.id)" v-if="item.concern == '置顶'">取消置顶</span>
                        <span style="font-size:12px;color:#349EDF;margin-left:20px;cursor:pointer" @click="toTop(item.id)" v-if="item.concern != '置顶'">置顶</span>
                        <span style="font-size:12px;color:red;cursor:pointer;margin-left:20px" @click="deleteArticle(item.id)">删除</span>  <!-- 删除操作，这边没有做二次校验 -->
                    </div>
                </el-row>
                <router-link :to="'/myBlogDetailShow/'+item.id" style="text-decoration: none;color:black">
                    <div style="text-align:left;margin-top:10px">
                        <div v-text="item.content.replace(/<\/?[^>]*>/g, '')" style="color:#6B6B6B;overflow: hidden;max-width: 880px;text-overflow:ellipsis;white-space: nowrap;"></div>
                    </div>
                </router-link>
                <hr style="border:0.5px dashed #0000fff;margin-top:20px"/>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            'myArticleList':[],
            'currentPage':1,
            'pageSize':10,
            'myArticleTotal':0
        }
    },
    methods:{
        //取消置顶
        cancleTop(id){
            var data = {
                id:id,
            };
            this.axios.post('/article/cancleTop',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },
        //置顶
        toTop(id){
            var data = {id};
            this.axios.post('/article/toTop',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        },

        //删除博客
        deleteArticle(id){
            var data = {
                id
            };
            this.axios.post('/article/deleteArticle',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{
                    this. getBlogList();
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
             
        },
        //加载 博客列表
        getBlogList(currentPage,pageSize){
            var data = {};
            this.axios.post('/article/getMyArticleList',data).then(response=> {
                if(response.data.code == 500){
                    alert(response.data.message);
                }else{

                    this.myArticleList = response.data.data.myArticleList;
                    this.myArticleTotal = response.data.data.myArticleTotal;
                }
            }).catch(error => {
               this.$message({
                    type: 'warning ',
                    message: '异常'+error
                }); 
            });
        }
    },
    mounted(){
        this. getBlogList();  //下拉分页暂时没做，整页加载
    }
}
</script>

<style scoped>
.titleFlag{
    border:1px solid #FFFFFF;
    border-radius:3px;
    padding:3px
}

.myBlogList:hover{
    color: #CF0C16 !important;
}
.myBlogList {
    color: black !important;
}
</style>